<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<script type="text/template" id="pzHeader">
<div class="pz-header">
  <div class="logo" style="background-image:url(${logo})"></div>
  <div id="j-headerNav" class="nav clearfix">
    {@each nav as item}
    <span class="j-headerItem" data-title="${item.title}">${item.title}</span>
    {@/each}
  </div>
  <div id="j-headerOther" class="other clearfix">
    {@each other as item}
    {@if item.list}
    <div class="item j-headerItem" data-title="${item.title}">
      <span class="pz-icon ${item.class}">&nbsp;${item.title}</span>
      <em class="pz-icon icon-iccaretdown"></em>
      <div class="itemselect{@if item.listAlign == 'right'} itemselect-right{@/if}" >
        <div class="itemoption" data-title="${item.title}">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          {@each item.list as option}
          <span class="j-optionlink">${option.title}</span>
          {@/each}
        </div>
      </div>
    </div>
    {@else}
    <span class="j-headerItem item pz-icon ${item.class}" data-title="${item.title}" data-link="${item.link}">&nbsp;${item.title}</span>
    {@/if}
    {@/each}
  </div>
  <div id="j-breadcrumb" class="breadcrumb"></div>
</div>
</script>
<script type="text/template" id="pzSide">
<div class="pz-side">
  <div id="j-sideNav" class="nav">
    {@each nav as item}
    <ul>
      {@each item.list as sideItem}
      <li class="item" data-title="${sideItem.title}" data-link="${sideItem.link}">${sideItem.title}</li>
      {@/each}
    </ul>
    {@/each}
    {@each other as item}
    <ul>
      {@each item.list as sideItem}
      <li class="item" data-title="${sideItem.title}" data-link="${sideItem.link}">${sideItem.title}</li>
      {@/each}
    </ul>
    {@/each}
  </div>
</div>
</script>
<script type="text/template" id="pzMain">
<div id="j-mainIframe" class="pz-main"></div>
</script>
<script src="//static.xinhuaapp.com/js/jquery-1.11.0-min.js"></script>
<script src="../js/tpl.js"></script>
</body>
</html>